@charset "utf-8";
@import "common/reset";
$font-size: 20px;
@function r($px) {
    @return $px / $font-size * 1rem;
}
html,
body {
    height: 100%;
}
.web{
    height: 100%;
    overflow: hidden;
    position: relative;
    section{
        .kv{
             width: 100%;
            position: relative;
            img {
                width: 100%;
            }
            .mask{
                position: absolute;
                bottom: r(4px);
                left: 0;
                opacity: 0;
                background: rgba(0,0,0,.5);
                width: 100%;
                height: r(104px);
                transition: all 1s;
                transform: translateY(100%);
                text-align: center;
                h3{
                    font-size: r(27px);
                    color: white;
                    padding-top: r(25px);
                    padding-bottom: r(15px);
                    overflow: hidden;
                    white-space: nowrap;
                    span{
                        background: #b20000;
                        font-size: r(27px);
                        padding: r(2px) r(4px);
                    }
                }
                ul {
                    display: inline-block;
                    li {
                        display: inline-block;
                        width: r(10px);
                        height: r(10px);
                        background: #cebeb1;
                        border-radius: 50%;
                        &.active {
                            background: #b60005;
                        }
                        &:hover {
                            background: #b60005;
                        }
                    }
                }
            }
            &:hover {
                .mask {
                    transform: translateY(0%);
                    opacity: 1;
                }
            }
        }
        .gg{
            width: 95%;
            margin: 0 auto;
            margin-bottom: r(30px);
            li{
                display: inline-block;
                width: 48%;
                background: #f6f6f6;
                padding-bottom: r(10px);
                margin-top: r(20px);
                &:nth-child(odd){
                    margin-right: 2%;
                }
                a{
                    color: black;
                }
                img{
                    width: 100%;
                }
                p{
                    font-size: r(22px);
                    margin-top: r(14px);
                    margin-left: r(8px);
                }
                .marketing{
                    margin-top: r(14px);
                    a{
                        font-size: r(18px);
                        background: #b20000;
                        color: white;
                        padding: r(4px) r(25px);
                        border-radius: 3px;
                        margin-left: r(6px);
                    }
                    i{
                        font-size: r(20px);
                        color: #c5c5c5;
                        margin-left: r(20px);
                        &:last-of-type{
                            margin-left: r(5px);
                        }
                        span{
                            font-size: r(16px);
                            color: #c5c5c5;
                        }
                    }
                }
                .time{
                    margin-top: r(14px);
                    line-height: r(35px);
                    i{
                        font-size: r(35px);
                        color: #c5c5c5;
                        line-height: r(35px);
                        vertical-align: middle;
                        margin-right: r(10px);
                        margin-left: r(6px);
                        span{
                            font-size: r(18px);
                            color: #c5c5c5;
                            vertical-align: middle;
                        }
                    }
                    span{
                        font-size: r(14px);
                        color: #c5c5c5;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}
